<template>
  <a-card class="ax__template SystemUser" :body-style="bodyStyle" v-if="!userShowForm">
    <a-flex vertical class="h-100">
      <!-- 顶部筛选，查询选项 -->
      <HeadVue />
      <!-- 表单数据 -->
      <div class="data__content">
        <TableVue v-if="userTable.viewMode === 'table'" data-selection-exclude></TableVue>
        <CardVue v-else></CardVue>
      </div>
      <!-- 底部分页信息 -->
      <FooterVue></FooterVue>
      <!-- 表单编辑 -->
    </a-flex>
  </a-card>
  <a-card class="ax__template SystemUser" v-else>
    <FormVue />
  </a-card>
</template>

<script setup lang="ts">
import { bodyStyle } from '@/global/config/gen';
import { userList } from './data/curd';
import { userResetForm, userShowForm } from './data/form';
import { userTable } from './data/table';
import FooterVue from './pages/components/AXFooter.vue';
import HeadVue from './pages/components/AXHead.vue';
import FormVue from './pages/components/UserForm.vue';
import CardVue from './pages/table-card/AXCard.vue';
import TableVue from './pages/table-card/AXTable.vue';

onMounted(async () => {
  await userList();
});

onUnmounted(() => {
  userShowForm.value = false;
  userResetForm();
  userTable.value.reset();
});
</script>

<style lang="scss" scoped></style>
